<template>
    <div class="block text-center" m="t-4">
        <el-carousel trigger="click" height="600px">
            <el-carousel-item v-for="item in images" :key="item.id">
                <!-- <h3 class="small justify-center" text="2xl">{{ item.id }}</h3> -->
                <img :src="item.src" alt="0">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const imagesType: { id: string; src: string }[] = [
    { id: '01', src: 'image1.png' },
    { id: '02', src: 'image2.png' },
    // 可以添加更多的对象
];
const mainSrc = ref('src/assets/images/banner');
//图片数组
const images = [{ id: '01', src: `${mainSrc.value}/banner1.png` },
                { id: '02', src: `${mainSrc.value}/banner2.png` },
                { id: '03', src: `${mainSrc.value}/banner3.png` },
                { id: '04', src: `${mainSrc.value}/banner4.png` },]
</script>

<style scoped lang="scss">
$wid: 1090px;
/* 走马灯宽度 */
.block {
    width: $wid;
    margin: 0 auto;
}
img{
    width: 100%;
    height: 100%;
}

.demonstration {
    color: var(--el-text-color-secondary);
    width:$wid;
}

.el-carousel__item {
    width: $wid;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>